import React from "react";

import { storiesOf } from "@storybook/react";
import { select } from "@storybook/addon-knobs";
// import { withSmartKnobs } from 'storybook-addon-smart-knobs'


import Tag from ".";

const boolVariants = {
  true: true,
  false: false,
  // None: undefined,
};

const colorVariants = {
  success: "success",
  error: "error",
  default: "default",
  warning: "warning",
  processing: "processing",
  '#2db7f5': "#2db7f5",
};

storiesOf("Tag", module)
  .add("Tag", () => (
    <div className='flex items-baseline'>
      <Tag
        color={select("Color", colorVariants, "default")}
        // visible={select("Visible", boolVariants, true)}
        closable={select("Closable", boolVariants, true)}
        onClick={() => console.info('click')}
        onClose={() => alert('close')}
      >
        123
      </Tag>

    </div>
  ));
